<?php get_header(); ?>
<script language="javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.imagesloaded.js" type="text/javascript"></script>
<script>
  var slider = '';
  var now = 2;
  $(document).ready(function(){
    $('.person').bxSlider({
      prevText: '',
      nextText: '',
    });
  
    slider = $('.bxslider').bxSlider({
      controls: false,
      onPrevSlide: function(){
        var tmp = $('#before').text();
        var tmp2 = $('#now').text();
        var tmp3 = $('#after').text();
        $('#now').html(tmp);
        $('#after').html(tmp2);
        $('#before').html(tmp3);
        
        switch(now){
          case 1:
            now = 2;
            break;
          default:
            now = now - 1;
            break;
        }
      },
      onNextSlide: function(){
        var tmp = $('#before').text();
        var tmp2 = $('#now').text();
        var tmp3 = $('#after').text();
        $('#now').html(tmp3);
        $('#after').html(tmp);
        $('#before').html(tmp2);
        
        switch(now){
          case 3:
            now = 1;
            break;
          default:
            now = now + 1;
            break;
        }
        
        slider.goToSlide(now);
      },
      
    });
    slider.goToSlide(2);
    
    $('#before').click(function(){
      var tmp = $('#before').text();
      var tmp2 = $('#now').text();
      var tmp3 = $('#after').text();
      $('#now').html(tmp);
      $('#after').html(tmp2);
      $('#before').html(tmp3);
      
      var tmp = $('#now').attr('data-id');
      $('#now').attr('data-id', $(this).attr('data-id'));
      $('#before').attr('data-id', $('#after').attr('data-id'));
      $('#after').attr('data-id', tmp);
      
      now = $('#now').attr('data-id');
      slider.goToSlide(now);
      
      // switch(now){
        // case 1:
          // now = 2;
          // break;
        // default:
          // now = now - 1;
          // break;
      // }
      
      // slider.goToSlide(now);
    });
    
    $('#after').click(function(){
      var tmp = $('#before').text();
      var tmp2 = $('#now').text();
      var tmp3 = $('#after').text();
      $('#now').html(tmp3);
      $('#after').html(tmp);
      $('#before').html(tmp2);
      
      var tmp = $('#now').attr('data-id');
      $('#now').attr('data-id', $(this).attr('data-id'));
      $('#after').attr('data-id', $('#before').attr('data-id'));
      $('#before').attr('data-id', tmp);
      
      now = $('#now').attr('data-id');
      slider.goToSlide(now);
      
      // switch(now){
        // case 3:
          // now = 1;
          // break;
        // default:
          // now = now + 1;
          // break;
      // }
      
      // slider.goToSlide(now);
    });
    
    // $('.box-header a').click(function(){
      
    // });
    
    // popup
    $('body').on('click', '.person img', function(){
      // var index = $('map area').index(this);
      // $(this).parents('.about2').find('.popup:nth-child('+(index+4)+')').fadeIn('fast');
      $('.popup-layout').show();
      $('.person img').removeClass('active');
      $('.'+$(this).attr('alt')).fadeIn('fast');
      $('.about2 .nav-description').fadeOut('fast');
      console.log($('#show_'+$(this).attr('alt')));
      $(this).addClass('active');
      $(this).stop().animate({opacity: 1}, 200);
    });
    
    $('.close').click(function(){
      $(this).parent().fadeOut('fast');
      $('.about2 .nav-description').fadeIn('fast');
      $('.popup-layout').hide();
      
      // grayscale($('.person img.active'));
      $('.person img.active').stop().animate({opacity: 0}, 200);
      $('.person img').removeClass('active');
    });
    
    $('.about.box').center();
    
    // var pos = $('.about.box').position();
    // $('.about.box').css('top', (pos.top-95)+'px');
    
    // grayscale
    var img = $('.person').imagesLoaded();
    img.always(function(){
      // grayscale($('.person img'));
      
      $('.person img').each(function() {
        $(this).wrap('<div style="display: inline-block; width: '+ this.width +'px; height:' + this.height + 'px;">').clone().addClass('gotcolors').css('position', 'absolute').insertBefore(this);
        this.src = grayscale(this.src);
        
        $(this).siblings('.gotcolors').css('opacity', '0');
      }).animate({opacity: 1}, 500);
      
      $('body').on('mouseover', '.person img:not(.active)', function(){
        // grayscale.reset($(this));
        $(this).stop().animate({opacity: 1}, 200);
        // console.log($(this));
      });
      
      $('body').on('mouseout', '.person img:not(.active)', function(){
        // grayscale($(this));
        $(this).stop().animate({opacity: 0}, 200);
      });
      
    });
    
  });
  
  $(window).resize(function(){
    $('.about.box').center();
  });
</script>

<div class="about box">
  <div class="box-container">
    <div class="box-header">
      <div class="box-sidebar">
        <?php 
          $id = 94;
          $post1 = get_post($id);
        ?>
        <!--<a id="before" href="javascript:void(0)"><?php echo $post1->post_title; ?></a>-->
        <a data-id="1" id="before" href="javascript:void(0)"><?php echo $post1->post_title; ?></a>
      </div>
      <div class="box-title">
        <span></span>
        <?php 
          $id = 91;
          $post2 = get_post($id);
        ?>
        <h3 id="now" data-id="2"><?php echo $post2->post_title; ?></h3>
      </div>
      <div class="box-sidebar">
        <?php 
          $id = 96;
          $post3 = get_post($id);
        ?>
        <!--<a id="after" href="javascript:void(0);">meet <br />THE TEAM</a>-->
        <a data-id="3" id="after" href="javascript:void(0);">meet <br />THE TEAM</a>
      </div>
      <div class="clear"></div>
    </div>
    <div class="box-content">
      <div class="box-container">
        <ul class="bxslider">
          <li class="about1">
            <?php echo wpautop($post1->post_content); ?>
          </li>
          <li class="about1">
             <?php echo wpautop($post2->post_content); ?>
          </li>
          <li class="about2">
            <?php 
              $args = array(
                'category' => 31,
                'numberposts' => -1
              );
              
              $posts = get_posts($args);
            ?>
            <ul class="person">
              <?php 
                $n = 1;
                $str = '';
                
                foreach($posts as $post){ 
                  $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
                  
                  if($n == 1){ $str = '<li>'; }
                  $str = $str.'<img alt="'.$post->post_name.'" src="'.$feat_image.'" />';
                  $n++;
                  if($n > 4){ $str = $str.'</li>'; $n = 0; }
                } 
                echo $str;
              ?>
            </ul>

            <div class="nav-description">
              <p>"I'd rather have a moment of wonderful than a lifetime of nothing special"</p>
              <div class="clear"></div>
              
            </div>
            
            <div class="popup-layout"></div>
            
            <?php foreach($posts as $post){ 
                  // $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
            ?>
            <div class="popup <?php echo $post->post_name ?>">            
              <div class="close">&times;</div>
              <h2><?php echo $post->post_title; ?></h2>
              <p class="subtitle"><?php the_field('job', $post->ID) ?></p>
              <hr />
              <?php echo wpautop($post->post_content); ?>
              <hr />
              <ul class="socmed">
                <li><a href="<?php the_field('facebook',$post->ID) ?>" class="fb"></a></li>
                <li><a href="<?php the_field('twitter',$post->ID) ?>" class="twitter"></a></li>
                <li><a href="<?php the_field('pinterest',$post->ID) ?>" class="pinterest"></a></li>
                <li><a href="<?php the_field('rss',$post->ID) ?>" class="rss"></a></li>
                <li><a href="<?php the_field('vimeo',$post->ID) ?>" class="vimeo"></a></li>
              </ul>
            </div>
            
            <?php } ?>
            
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<?php get_footer(); ?>
